<template>
	<view class="page brand">
		<!-- 头部专场描述 -->
		<view class="b-miaoshu">
			<view class="m-content">
				<view class="c-top">
					<image :src="brandInfo.logo_url" mode="aspectFit"></image>
					<view class="t-title">
						<text>{{brandInfo.shop_name}}</text>
						<text>{{brandInfo.store_info}}</text>
					</view>
				</view>
				<view class="c-bottom">
					
				</view>
			</view>
		</view>
		<!-- 主体内容 -->
		<view class="b-container">
			<view class="c-tabs">
				<view class="t-item" :class="{'t-item-active': tabCurrentIndex === index}"
					v-for="(item, index) in tabs"
					:key="index" @click="changeTab(index)">
					<text>{{item.text || item.title}}</text>
				</view>
			</view>
			<!-- 专场商品列表 -->
			<view class="c-wapper">
				<block v-for="(item, index) in brandGoods" :key="index">
					<view class="w-box" @click="toGoodsDetailPage(item)">
						<image :src="item.pic_url" @tap="nav(item.goods_jump_url)"></image>
						<view class="b-desc">
							<view class="d-price">
								<text>￥{{item.cprice}}</text>
								<text>￥{{item.oprice}}</text>
							</view>
							<view class="d-title">{{item.title}}</view>
						</view>
					</view>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex'
/* api */
import {getBrandGoods} from '../../api/goods.js'
/* 缓存 */
import {setLocalStorage,getLocalStorage} from '../../api/util/storage.js'

export default {
	data() {
		return {
			brandId: 0,
			brandPage: 1,
			brandSort: 1,
			// 专场信息
			brandInfo: {},
			brandData: {},
			// 商品数据
			brandGoods: [],
			// tab数据
			tabs: [],
			tabCurrentIndex: 0,
		}
	},
	onLoad(options) {
		this.brandId = options.brand_id
		// 设置页面标题
		uni.setNavigationBarTitle({
		　　title: this.navigationBarTitle
		})
		this._getBrandGoods()
	},
	computed: {
		...mapState(['navigationBarTitle'])
	},
	methods: {
		// 获取专场商品详情
		async _getBrandGoods() {
			const {data: res} = await getBrandGoods(this.brandId, this.brandPage, this.brandSort)
			this.brandData = res
			this.brandInfo = res.brandInfo
			this.getGoodsList(res)
		},
		// 获取商品列表
		getGoodsList(res) {
			// 判断第一层是否包含goods属性
			if(res.goods) {
				this.tabs = res.msort
				this.brandGoods = res.goods
			}else {
				this.tabs = res.floor_bar
				// 重新构造数据格式，把内部数组转换为对象格式
				let temp = res.floor_data
				let tempList = []
				for (let i = 0; i < temp.length; i++) {
					temp[i].shift()
					temp[i].forEach(item => {
						tempList.push(item)
					})
				}
				tempList.forEach((item, index) => {
					if(!item.title) tempList.splice(index, 1)
				})
				this.brandGoods = tempList
			}
		},
		// 切换tab
		changeTab(index) {
			this.tabCurrentIndex = index
			if(this.brandData.goods) {
				this.brandSort = parseInt(this.tabs[index].val_first)
				this._getBrandGoods(this.brandId, this.brandPage, this.brandSort)
			}else {
				console.log('点击项暂不可用！')
			}
		},
		// 跳转到商品详情页
		toGoodsDetailPage(item) {
			console.log(item)
			// uni.navigateTo({url: '../goods_detail/goods_detail'})
		}
	}
}
</script>

<style lang="less">
@import "./brand_detail";
</style>
